{% extends "base.html" %}

{% block title %}编辑文档 - Ruiyun Cloud{% endblock %}

{% block content %}
<div class="edit-page">
    <div class="page-header">
        <h1>✏️ 编辑文档</h1>
        <p>修改文档内容和格式</p>
    </div>

    <form method="POST" action="{{ url_for('admin.edit', id=doc.id) }}" class="edit-form">
        <!-- Title Field -->
        <div class="form-group">
            <label for="title">文档标题 <span class="required">*</span></label>
            <input
                type="text"
                id="title"
                name="title"
                class="form-control"
                placeholder="请输入文档标题"
                maxlength="200"
                value="{{ doc.title }}"
                required
            >
            <small class="form-text">最多200个字符</small>
        </div>

        <!-- Category Field -->
        <div class="form-group">
            <label for="category">分类</label>
            <input
                type="text"
                id="category"
                name="category"
                class="form-control"
                placeholder="例如：API文档、使用指南、发布说明等"
                maxlength="100"
                value="{{ doc.category or '' }}"
                list="category-suggestions"
            >
            <datalist id="category-suggestions">
                <!-- Will be populated dynamically -->
            </datalist>
            <small class="form-text">选填，相同分类的文档会自动归类显示</small>
        </div>

        <!-- Format Selection -->
        <div class="form-group">
            <label for="format">文档格式</label>
            <select id="format" name="format" class="form-control">
                <option value="markdown" {% if doc.format == 'markdown' %}selected{% endif %}>Markdown</option>
                <option value="html" {% if doc.format == 'html' %}selected{% endif %}>HTML</option>
                <option value="text" {% if doc.format == 'text' %}selected{% endif %}>Plain Text</option>
            </select>
        </div>

        <!-- Content Field -->
        <div class="form-group">
            <label for="content">文档内容 <span class="required">*</span></label>
            <textarea
                id="content"
                name="content"
                class="form-control textarea-large"
                placeholder="请输入文档内容..."
                rows="25"
                required
            >{{ doc.content }}</textarea>
            <small class="form-text">
                支持Markdown语法、HTML标签或纯文本
            </small>
        </div>

        <!-- Form Actions -->
        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-lg">
                ✓ 保存修改
            </button>
            <a href="{{ url_for('public.view_document', id=doc.id) }}" class="btn btn-secondary btn-lg">
                ✕ 取消
            </a>
            <a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary btn-lg">
                ← 返回后台
            </a>
        </div>
    </form>

    <!-- Document Info -->
    <div class="doc-info">
        <h3>📋 文档信息</h3>
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">文档ID:</span>
                <span class="info-value">{{ doc.id }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">创建时间:</span>
                <span class="info-value">{{ doc.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">更新时间:</span>
                <span class="info-value">{{ doc.updated_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">内容长度:</span>
                <span class="info-value">{{ doc.content|length }} 字符</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .edit-page {
        max-width: 1200px;
        margin: 0 auto;
    }

    .edit-form {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #333;
    }

    .required {
        color: #f5576c;
    }

    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    .form-control:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .textarea-large {
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        resize: vertical;
        min-height: 500px;
        line-height: 1.6;
    }

    .form-text {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #666;
    }

    .form-actions {
        display: flex;
        gap: 1rem;
        justify-content: flex-start;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }

    .btn-lg {
        padding: 0.875rem 2rem;
        font-size: 1.1rem;
    }

    /* Document Info */
    .doc-info {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .doc-info h3 {
        margin-bottom: 1rem;
        font-size: 1.25rem;
        color: #333;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 5px;
    }

    .info-label {
        font-weight: 600;
        color: #666;
    }

    .info-value {
        color: #333;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-save draft to localStorage (optional enhancement)
    const contentTextarea = document.getElementById('content');
    const titleInput = document.getElementById('title');

    // Save draft every 30 seconds
    let autoSaveInterval = setInterval(() => {
        const draft = {
            title: titleInput.value,
            content: contentTextarea.value,
            timestamp: new Date().toISOString()
        };
        localStorage.setItem('doc_edit_draft_{{ doc.id }}', JSON.stringify(draft));
        console.log('Draft auto-saved');
    }, 30000);

    // Clear auto-save on form submit
    document.querySelector('.edit-form').addEventListener('submit', function() {
        clearInterval(autoSaveInterval);
        localStorage.removeItem('doc_edit_draft_{{ doc.id }}');
    });

    // Check for existing draft on load
    window.addEventListener('load', function() {
        const savedDraft = localStorage.getItem('doc_edit_draft_{{ doc.id }}');
        if (savedDraft) {
            const draft = JSON.parse(savedDraft);
            const draftDate = new Date(draft.timestamp);
            const now = new Date();
            const hoursSinceDraft = (now - draftDate) / (1000 * 60 * 60);

            // If draft is less than 24 hours old, ask to restore
            if (hoursSinceDraft < 24) {
                if (confirm(`发现 ${Math.round(hoursSinceDraft * 60)} 分钟前的草稿，是否恢复？`)) {
                    titleInput.value = draft.title;
                    contentTextarea.value = draft.content;
                }
            }
        }
    });

    // Character counter
    contentTextarea.addEventListener('input', function() {
        const length = this.value.length;
        const formText = this.nextElementSibling;
        formText.textContent = `已输入 ${length} 个字符`;
    });
</script>
{% endblock %}
